<template>
	<view>
		<view class="sear">
			<u-search :show-action="true" actionText="搜索" shape="square" @custom="searcher"></u-search>
		</view>
		<view class="vips">
			<text>精品名厨视频-会员专享</text>
			<image src="/static/images/star.png"></image>
		</view>
		<scroll-view scroll-x anable-flex>
			<view class="section-item" v-for="item in vipData" :key="item._id">
				<foodone :item="item" @tap="getDetail(item._id)"></foodone>
			</view>
		</scroll-view>
		<view class="goodSearch">
		<template v-if="searchData.length>0">
		

			<view  class="one-item" v-for="item in searchData" :key="item.name">
				
				<!-- 判断是否搜索到了商品 -->
			
					
				
				<!-- 判断是否有商品的图片 -->
				<template>
					<image v-if="item.coverpic" :src="item.coverpic" mode="" class="l"></image>
					<image v-else src="/static/images/暂无.png" mode="" class="l"></image>
				</template>
				<view class="r" @tap="getDetail(item._id)">
					<view class="product-name">{{item.name}}</view>
					<view class="peiliao">
						<text v-for="ingredient in item.ingredient" :key="ingredient.name">{{ingredient.name}}、</text>
					</view>
					<view class="footers">
						<view>
							<text>{{item.pageview}}万</text>
							<image src="../../static/images/浏览.png"></image>
						</view>
						<view>
							<text>{{item.collections}}万</text>
							<image src="../../static/images/收藏.png"></image>
						</view>
					</view>
				</view>
				
				
				
			</view>
			</template>
			<text v-else class="nothing">未搜索到相关信息</text>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchData: [],
				vipData: []
			}
		},
		onLoad(option) {
			this.getSearch({
				...option,
				pageSize: 10,
				currentPage: 1
			})
			this.getVipSearch()
		},
		methods: {
			async getSearch(params) {
				const data = await this.$api.search.getSearch(params)
				this.searchData = data.menus
				console.log("搜索列表", this.searchData);
			},
			async getVipSearch() {
				const data = await this.$api.search.getVip()
				this.vipData = data.message
			},
			searcher(value){
					this.getSearch({
						val:value,
						pageSize: 10,
						currentPage: 1
					})
			},
			getDetail(id){
				console.log(id);
				uni.navigateTo({
					url:"../datail/datail?_id="+id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.sear {
		background-color: #EE7B2D;
		margin: 0 auto;
		padding: 20rpx 40rpx;
		box-sizing: border-box;
	}

	.vips {
		height: 50rpx;
		line-height: 50rpx;
		width: 680rpx;
		margin: 20rpx auto;
		display: flex;

		image {

			height: 100%;
			width: 50rpx;
			margin-left: 15rpx;
		}
	}

	.section-item {
		width: 300rpx;
		height: 400rpx;
		display: inline-block;
		margin-right: 50rpx;

	}

	scroll-view {

		margin-left: 35rpx;
		display: flex;
		white-space: nowrap;
	}

	.goodSearch {
		width: 680rpx;
		margin: 50rpx auto;

		.one-item {
			width: 100%;
			height: 400rpx;
			display: flex;

			.l {
				width: 400rpx;
				height: 300rpx;
				border-radius: 30rpx;
			}

			.r {
				margin-left: 25rpx;
				margin-top: 25rpx;

				.product-name {
					font-size: 35rpx;
					font-weight: bold;
				}

				.peiliao {
					margin: 20rpx 0 65rpx;
					font-size: 28rpx;
					color: #d2d2d2;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					width: 280rpx;
				}

				.footers {
					width: 280rpx;
					font-size: 27rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					>view {
						display: flex;
						width: 130rpx;
						justify-content: space-around;

					}
				}

				image {
					width: 38rpx;
					height: 38rpx;
				}
			}
		}
	}
.nothing{
	display: block;
	width: 300rpx;
	margin: 10rpx auto;
	text-align: center;
	}
</style>
